<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/employeeAdd.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4586065_entif6iefxe.css">

</head>
<body>
<c:import url="../header.jsp"></c:import>
<div id="box">
    <div id="TopDiv">
        <span onclick="history.back()"><i
                class="iconfont icon-fanhuijiantou"></i>&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</span>
        <span><strong>&nbsp;&nbsp;添加员工</strong></span>
    </div>
    <div id="FromDiv">
        <div class="input">
            <span class="red">*</span>&nbsp;账号:&nbsp;&nbsp;
            <input id="accountnumber" name="accountnumber" class="text" type="text" autocomplete="off"
                   placeholder="请输入账号" maxlength="20">
            <span class="Erroraccountnumber"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;员工姓名:&nbsp;&nbsp;
            <input id="staffname" name="staffname" class="text" type="text" autocomplete="off"
                   placeholder="请输入员工姓名"
                   maxlength="12">
            <span class="Errorstaffname"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;手机号:&nbsp;&nbsp;
            <input id="phone" name="phone" class="text" type="text" autocomplete="off" placeholder="请输入手机号"
                   maxlength="11">
            <span class="Errorphone"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;性别: &nbsp;&nbsp;
            <label>
                <input type="radio" name="gender" class="gender" value="0" checked>男
            </label>
            <label>
                <input type="radio" name="gender" class="gender" value="1">女
            </label>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;身份证号:&nbsp;&nbsp;
            <input id="idnumber" name=idnumber" class="text" type="text" autocomplete="off"
                   placeholder="请输入身份证号">
            <span class="Erroridnumber"></span>
        </div>
        <div class="button">
            <button class="cancel" onclick="history.back()">
                <span>取消</span>
            </button>
            <button class="conserve" onclick="add()">
                <span>保存</span>
            </button>
            <button class="add">
                <span>保存并继续添加</span>
            </button>
        </div>
    </div>
</div>
<c:import url="../Leftnavigationbar.jsp"></c:import>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</body>
<script>
    function add() {
        $.ajax({
            type: "post",
            url: "/employeeAddServlet",
            data: {
                accountnumber: $('#accountnumber').val(),
                staffname: $('#staffname').val(),
                phone: $('#phone').val(),
                gender: $('.gender').val(),
                idnumber: $('#idnumber').val()
            },
            success: function (data) {
                alert('添加成功!')
                window.location.href = '/admin/employee.jsp'
            }
        })
    }

    // 账号
    const accountnumber = document.getElementById('accountnumber')
    accountnumber.addEventListener('blur', (e) => {
        if (accountnumber.value === '') {
            document.querySelector('.Erroraccountnumber').innerHTML = '账号不能为空!'
            return
        }
    })
    // 员工姓名
    const staffname = document.getElementById('staffname')
    staffname.addEventListener('blur', (e) => {
        if (staffname.value === '') {
            document.querySelector('.Errorstaffname').innerHTML = '员工姓名不能为空!'
            return
        }
    })
    // 手机号
    const phone = document.getElementById('phone')
    phone.addEventListener('blur', (e) => {
        if (phone.value === '') {
            document.querySelector('.Errorphone').innerHTML = '手机号不能为空!'
            return
        }
    })
    // 身份证号
    const idnumber = document.getElementById('idnumber')
    idnumber.addEventListener('blur', (e) => {
        if (idnumber.value === '') {
            document.querySelector('.Erroridnumber').innerHTML = '身份证号不能为空!'
            return
        }
    })
</script>
</html>
